<template>
<div id="navLeftPage">
  <div class="sec1">
    <ul>
      <li class="flex" v-for="item in leftList">
        <span class="img_box">
          <img src="../../../static/img/51.png" alt="">
        </span>
        <span>
          <router-link :to="item.path">{{item.name}}</router-link>
        </span>
      </li>

    </ul>
  </div>
  <div class="sec2">
    <div class="sitem sitem1 flex">
      <div class="left">
        <i class='el-icon-setting'></i><br>
        高频彩
      </div>
      <div class="right flex">
        <div class="item item1 flex">
          <router-link to="/hall/sfshishi">三分时时彩</router-link>
          <router-link to="/hall/cqshishi">重庆时时彩</router-link>
        </div>
        <div class="item item2 flex">
          <router-link to="/hall/pk10">北京PK10</router-link>
          <router-link to="/hall/bj28">幸运28</router-link>
        </div>
        <div class="item item3 flex">
          <router-link to="/hall/pk10">三分PK10</router-link>
          <router-link to="/hall/sfshishi">上海时时乐</router-link>
        </div>
      </div>
      <div class="hover">
        <div class="con">
          <h3>高频彩</h3>
          <ul class="clearfix">
            <li v-for='item in gaoList'>
              <router-link to='/'>{{ item.text }}</router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="sitem sitem2 flex">
      <div class="left">
        <i class='el-icon-setting'></i><br>
        低频彩
      </div>
      <div class="right flex">
        <div class="item item1 flex">
          <router-link to="/hall/liuhe">香港六合彩</router-link>
          <router-link to="/hall/fc3d">福彩3D</router-link>
        </div>
        <div class="item item2 flex">
          <router-link to="/hall/pl3">排列三</router-link>

        </div>
        <div class="item item3 flex">
          <router-link to="/sdss"></router-link>
          <router-link to="/sdss"></router-link>
        </div>
      </div>
      <!--<div class="hover">-->
        <!--<div class="con">-->
          <!--<h3>低频彩</h3>-->
          <!--<ul class="clearfix">-->
            <!--<li v-for='item in gaoList'>-->
              <!--<router-link to='/'>{{ item.text }}</router-link>-->
            <!--</li>-->
          <!--</ul>-->
        <!--</div>-->
      <!--</div>-->
    </div>
    <div class="sitem sitem3 flex">
      <div class="left">
        <i class='el-icon-setting'></i><br>
        全部
      </div>
      <div class="right flex">
        <div class="item item1 flex">
          <router-link to="/hall/sfshishi">三分时时彩</router-link>
          <router-link to="/hall/cqshishi">重庆时时彩</router-link>
        </div>
        <div class="item item2 flex">
          <router-link to="/hall/pk10">北京PK10</router-link>
          <router-link to="/hall/bj28">幸运28</router-link>
        </div>
        <div class="item item3 flex">
          <router-link to="/hall/pk10">三分PK10</router-link>
          <router-link to="/hall/liuhe">香港六合彩</router-link>
        </div>
      </div>
      <div class="hover">
        <div class="con">
          <h3>全部</h3>
          <ul class="clearfix">
            <li v-for='item in gaoList'>
              <router-link to='/'>{{ item.text }}</router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
  export default {
    data () {
      return {
        gaoList: [
          {
            text: '三分时时彩'
          },
          {
            text: '重庆时时彩'
          },
          {
            text: '北京PK拾'
          },
          {
            text: '幸运28'
          },
          {
            text: '三分PK拾'
          },
          {
            text: '上海时时乐'
          },
          {
            text: '天津时时彩'
          },
          {
            text: '新疆时时彩'
          },
          {
            text: '江苏快三'
          },
          {
            text: '山东11选5'
          },
          {
            text: '上海11选5'
          },
          {
            text: '江苏11选5'
          },
          {
            text: '广东11选5'
          },
          {
            text: '广西快三'
          },
          {
            text: '北京28'
          },
          {
            text: '安徽快三'
          }
        ],
        leftList: [
          {
            path: '/hall/liuhe',
            name: '六合彩'
          },
          {
            path: '/hall/pk10',
            name: '北京PK拾'
          },
          {
            path: '/hall/xjshishi',
            name: '重庆时时彩'
          },
          {
            path: '/hall/sh11x5',
            name: '上海11选5'
          },
          {
            path: '/hall/sfshishi',
            name: '三分时时彩'
          }
        ]
      }
    },
    methods: {}
  }
</script>

<style lang="less" scoped>
#navLeftPage{
  .sec1{

    li{
      height: 54px;
      line-height:54px;
      color: black;
      font-size: 14px;
      text-align: left;
      border: 1px solid #ccc;
      border-top: none;
      img{
        width: 100%;
        height:100%;
      }
    }
    .img_box{
      display: inline-block;
      width: 34px;
      height:34px;
      margin: 12px 7px 0 7px;
      /*float: left;*/
    }
  }
  .sec2{
    position: relative;
    height: 300px;
    border: 1px solid #ccc;
    border-right: none;
    margin: 10px 0;
    .sitem{
      height: 99px;
      padding:10px;
      border-right: 1px solid #ccc;
      .left{
        width: 70px;
      }
      .right{
        flex-direction: column;
        justify-content:space-around;
        flex:1;
        .item a{
          width: 50%;
          font-size: 12px;
          white-space: nowrap;
        }
      }
      .hover {
        position: absolute;
        left: 100%;
        width: 600px;
        height: 300px;
        border: 1px solid #ccc;
        border-left: none;
        background-color: #f0f0f0;
        z-index: 100;
        display: none;
        .con {
          width: 530px;
          height: 210px;
          padding: 35px;
          h3,
          ul {
            width: 100%;
            text-align: left;
          }
          h3 {
            margin-bottom: 25px;
            font-weight: normal;
            font-size: 14px;
            color: red;
          }
          ul li {
            float: left;
            width: 100px;
            margin-bottom: 25px;
          }
        }
      }
    }
    .sitem1 {
      border-bottom: 1px solid #ccc;
      .hover {
        top: -1px;
      }
    }
    .sitem2 {
      border-bottom: 1px solid #ccc;
      .hover {
        top: 50%;
        margin-top: -150px;
      }
    }
    .sitem3 .hover {
      bottom: -1px;
    }
    .sitem:hover {
      background-color: #f0f0f0;
      border-right: 1px solid #f0f0f0;
    }
    .sitem:hover .hover,
    .hover:hover {
      display: block;
    }
    .el-icon-setting{
      font-size: 50px;
    }

  }
}
</style>
